<template>
  <div class="device-test">
    <h1>设备检测测试页面</h1>
    
    <div class="test-section">
      <h2>设备信息</h2>
      <div class="info-item">
        <strong>User Agent:</strong> {{ deviceInfo.userAgent }}
      </div>
      <div class="info-item">
        <strong>屏幕宽度:</strong> {{ deviceInfo.screenWidth }}px
      </div>
      <div class="info-item">
        <strong>屏幕高度:</strong> {{ deviceInfo.screenHeight }}px
      </div>
      <div class="info-item">
        <strong>是否移动设备:</strong> {{ deviceInfo.isMobile ? '是' : '否' }}
      </div>
      <div class="info-item">
        <strong>是否平板设备:</strong> {{ deviceInfo.isTablet ? '是' : '否' }}
      </div>
      <div class="info-item">
        <strong>是否移动屏幕:</strong> {{ deviceInfo.isMobileScreen ? '是' : '否' }}
      </div>
      <div class="info-item">
        <strong>应使用移动UI:</strong> {{ deviceInfo.shouldUseMobileUI ? '是' : '否' }}
      </div>
    </div>

    <div class="test-section" v-if="authStore.user">
      <h2>用户信息</h2>
      <div class="info-item">
        <strong>用户名:</strong> {{ authStore.user.username }}
      </div>
      <div class="info-item">
        <strong>角色:</strong> {{ authStore.user.role }}
      </div>
      <div class="info-item">
        <strong>姓名:</strong> {{ authStore.user.name }}
      </div>
    </div>

    <div class="test-section">
      <h2>跳转测试</h2>
      <div class="info-item">
        <strong>当前用户角色跳转路径:</strong> 
        {{ authStore.user ? getRedirectPath(authStore.user.role, deviceInfo.shouldUseMobileUI) : '未登录' }}
      </div>
      
      <div class="button-group">
        <button @click="testRedirect('user', true)">测试维修工+移动设备跳转</button>
        <button @click="testRedirect('user', false)">测试维修工+桌面设备跳转</button>
        <button @click="testRedirect('admin', true)">测试管理员+移动设备跳转</button>
        <button @click="testRedirect('manager', true)">测试经理+移动设备跳转</button>
      </div>
    </div>

    <div class="test-section">
      <h2>模拟移动设备</h2>
      <p>请在浏览器开发者工具中切换到移动设备模式，然后刷新页面查看检测结果。</p>
      <button @click="refreshDeviceInfo">刷新设备信息</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { getDeviceInfo, getRedirectPath } from '@/utils/device'

const authStore = useAuthStore()
const deviceInfo = ref(getDeviceInfo())

const refreshDeviceInfo = () => {
  deviceInfo.value = getDeviceInfo()
}

const testRedirect = (role: string, isMobile: boolean) => {
  const path = getRedirectPath(role, isMobile)
  alert(`角色: ${role}, 移动设备: ${isMobile ? '是' : '否'}, 跳转路径: ${path}`)
}

onMounted(() => {
  // 监听窗口大小变化
  window.addEventListener('resize', refreshDeviceInfo)
})
</script>

<style scoped>
.device-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.info-item {
  margin-bottom: 10px;
  padding: 8px;
  background: white;
  border-radius: 4px;
}

.button-group {
  margin-top: 15px;
}

.button-group button {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-group button:hover {
  background: #66b1ff;
}

h1, h2 {
  color: #333;
}
</style>